﻿@inject HttpClient HttpClient

<AntList Class="demo-loadmore-list" DataSource="@Data" ItemLayout="ListItemLayout.Horizontal" Loading="@InitLoading">
    <ChildContent Context="item">
        <ListItem Actions="actions">
            <ListItemMeta AvatarTemplate="avatar" Description="Ant Design, a design language for background applications, is refined by Ant UED Team">
                <TitleTemplate>
                    <a href="https://ant.design">@item.Name.Last</a>
                </TitleTemplate>
            </ListItemMeta>
            <div>content</div>
        </ListItem>
    </ChildContent>
    <LoadMore>
        @if (!InitLoading && !Loading)
        {
            <div class="demo-loadmore-btn-content ">
                <Button OnClick="OnLoadMore">loading more</Button>
            </div>
        }
    </LoadMore>
</AntList>

<style>

    .demo-loadmore-list {
        min-height: 350px;
    }

    .demo-loadmore-btn-content {
        text-align: center;
        margin-top: 12px;
        height: 32px;
        line-height: 32px;
    }
</style>

@code {

    static RenderFragment avatar =@<Avatar Src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></Avatar>;

static RenderFragment edit = @<a key="list-loadmore-edit">edit</a>;

static RenderFragment add = @<a key="list-loadmore-more">more</a>;


public RenderFragment[] actions = new[] { edit, add };

public int count = 3;

public string FakeDataUrl { get { return $"https://randomuser.me/api/?results={count}&inc=name,gender,email,nat&noinfo"; } }

public List<DataModel> Data { get; set; }

public bool InitLoading { get; set; } = true;

public bool Loading { get; set; } = false;

protected override async Task OnInitializedAsync()
{
Data = await GetData();
InitLoading = false;
await base.OnInitializedAsync();
}

public async Task OnLoadMore()
{
Loading = true;
var res = await GetData();
Data.AddRange(res);
Loading = false;
}

public async Task<List<DataModel>> GetData()
{
try
{
var res = await HttpClient.GetFromJsonAsync<Response>(FakeDataUrl);
return res.Results;
}
catch (Exception ex)
{
Console.WriteLine(ex);
return new List<DataModel>();
}
}

public class Response
{
public List<DataModel> Results { get; set; }
}

public class DataModel
{
public string Gender { get; set; }

public Name Name { get; set; }

public string Email { get; set; }

public string Nat { get; set; }
}

public class Name
{
public string Title { get; set; }

public string First { get; set; }

public string Last { get; set; }
}
}
